
// function bindEvent(el, type, fn) {
//     el.addEventListener(type, fn)
// }

// const p1 = document.getElementById('btn1')
// bindEvent(p1,'click', e => {
//     e.preventDefault() //阻止默认事件
//     console.log(e.target)  //触发元素
// })


// 事件冒泡 阻止冒泡
// const p1 = document.getElementById('p1')
// bindEvent(p1, 'click', event => {
//     console.log(event.target)
//     event.stopPropagation()
//     console.log('激活')
// })

// const body = document.body
// bindEvent(body, 'click', e => {
//     console.log('取消')
// })

    // 重写函数。
    function bindEvent(el, type,  seletcor, fn ) {
        if (fn == null) {
            fn = seletcor
            selector = null
        }
        el.addEventListener(type, event => {
            const target = event.target
            if (seletcor) {
                if (target.matches (seletcor)) {
                    fn.call(target, event)
                }
            } else {
                fn.call(target, event)
            }
        })
    }
// 事件代理
// 优点代码简结 减少浏览器内存 
// const agent = document.getElementById('div3')
// bindEvent(agent, 'click', e => {
//     console.log(e.target.nodeName)
//     if (e.target.nodeName === 'A') {
//         e.preventDefault()
//         alert(e.target.innerHTML)
//     }
// })
// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)
})

// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    event.preventDefault()
    alert(this.innerHTML)
})